<template>
	<view style="height: 100%;" @click="swiperAction">
		<u-swipe-action ref="swiperAction">
			<u-swipe-action-item :options="options" v-for="(item,i) in list" @click="(e) => changeSwiper(e,item)"
				:key="item.id">
				<view class="add flex flex-ai-c flex-jc-sb" @click="edit('choose',item)">
					<view style="width: 560rpx;">
						<view class="flex flex-ai-c font-26">
							<view class="moren" v-if="item.is_default">默认</view>
							<view class="ellipsis">{{item.citys}}</view>
						</view>
						<view class="ellipsis font-32 font-bold" style="margin: 10rpx 0;">{{item.detail}}</view>
						<view class="font-26">{{item.name}} {{item.phone.replace(/^(\d{3})\d{4}(\d{4})$/, "$1****$2")}}
						</view>
					</view>
					<view @click="edit('edit',item)">
						<u-icon name="edit-pen" size="30" />
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>

		<view style="height: 130rpx;">
			<view style="position: fixed;bottom: 50rpx;width: 100%;z-index: 100;">
				<ButtonConfirm myTxt="+ 新建收货地址" @click="edit('add')"></ButtonConfirm>
			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/api/user.js';
	import ButtonConfirm from '@/components/buttonConfirm.vue'
	export default {
		components: {
			ButtonConfirm
		},
		data() {
			return {
				options: [{
					text: '设为默认',
					style: {
						color: '#333333',
						backgroundColor: '#F5F6F7',
						fontSize: '24rpx',
						fontWeight: 600
					}
				}, {
					text: '删除',
					style: {
						backgroundColor: '#FCB527',
						fontSize: '24rpx',
						fontWeight: 600
					}
				}],
				list: [],
				state: 0
			}
		},
		onShow() {
			this.getAddressList()
		},
		onLoad(op) {
			if (op.state) {
				this.state = op.state
			}
		},
		methods: {
			swiperAction() {
				this.$refs.swiperAction.closeAll()
			},
			edit(status, item) {
				if (status == 'choose' && this.state) {
					let pages = getCurrentPages()
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.value = item.id
					uni.navigateBack({
						delta: 1
					})
					return
				}
				uni.navigateTo({
					url: `/pages/equipment/replenishment/addressEdit?status=${status}&info=${JSON.stringify(item)}`
				})
			},
			changeSwiper(e, item) {
				if (e.index === 0) { //默认
					this.editAddress(item)
				} else if (e.index === 1) { //del
					if(this.state) {
						let pages = getCurrentPages()
						let nowPage = pages[pages.length - 1]; //当前页页面实例
						let prevPage = pages[pages.length - 2]; //上一页页面实例
						prevPage.$vm.value = 'del'
					}
					this.delAddress(item.id)
				}
			},
			async getAddressList() {
				const res = await user.getAddressList()
				this.list = res.data
			},
			async editAddress(item) {
				const res = await user.editAddress({
					...item,
					is_default: 1,
				})
				this.getAddressList()
			},
			async delAddress(id) {
				const res = await user.delAddress({
					ids: id
				})
				this.getAddressList()
			}
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.add {
		height: 208rpx;
		margin: 0 30rpx;

		.moren {
			width: 60rpx;
			height: 26rpx;
			background: #FCB527;
			border-radius: 5rpx;
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			line-height: 26rpx;
			margin-right: 10rpx;
		}
	}

	.ellipsis {
		display: -webkit-box;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
</style>